<template>
  <el-dialog
    :visible.sync="centerDialogVisible"
    title="设备信息"
    width="1100px"
    @open="open"
    :destroy-on-close="true"
  >
    <div class="w-[100%] h-[600px]">
      <el-amap
        ref="amapRef"
        :center="centerValue"
        :zoom="zoom"
        @init="init"
        :doubleClickZoom="false"
      >
        <el-amap-marker
          v-for="(marker, index) in markers"
          :key="index"
          :position="marker.position"
          anchor="bottom-center"
        >
          <div slot="content" class="text-[red]">
            <div class="relative">
              <img
              @mouseenter="onMouseOver(marker)"
              @mouseleave="onMouseOut"
              src="https://pic.616pic.com/ys_img/00/04/01/IyCGKWWmaf.jpg"
              alt=""
              class="w-[20px] h-[20px]"
            />
            <div class="absolute right-[-20px] top-[0]">
              <img
              src="https://pic.616pic.com/ys_img/00/04/01/IyCGKWWmaf.jpg"
              alt=""
              class="w-[20px] h-[20px]"
            />
            </div>
            </div>
           
          </div>
        </el-amap-marker>
      </el-amap>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import {
  ElAmap,
  ElAmapPolygon,
  ElAmapMouseTool,
  ElAmapMarker
} from "@vuemap/vue-amap";
import { cloneDeep, isArray } from "@pureadmin/utils";
const defaultcenter = [103.981651, 30.722975];
const centerValue = ref(defaultcenter);
const zoom = ref(12);
const createArea = ref(false);
const createType = ref("polygon");
const polygons = ref();
const markers = ref([
  {
    position: [103.981651, 30.722975],
    title: "测试1",
    draggable: true
  }
]);
const isEdit = ref(false);
const amapRef = ref();
const props = defineProps({
  centerDialogVisible: {
    type: Boolean,
    default: false
  }
});
watch(
  () => props.centerDialogVisible,
  newVal => {
    if (newVal) {
      console.log(props.centerDialogVisible);
    }
  }
);
let map = null;
const rightlog = ref([]);

const init = e => {
  map = e;
  centerValue.value = props.center ?? defaultcenter;
  //鼠标右键
};
const onMouseOver = item => {
  console.log(item, "鼠标进来了");
};
// 鼠标移出
const onMouseOut = () => {
  console.log("鼠标出去了");
};

const open = () => {
  console.log("1init");
  init();
};

onMounted(() => {
  console.log(props.centerDialogVisible);
});
</script>

<style lang="scss" scoped></style>
